<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>北向接口调用情况</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" href="../css/freechart.css" type="text/css" />
<style type="text/css"> 
*{margin:0;padding:0;list-style:none;font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:20px;}
table {border-collapse:collapse;border-top:3px solid #ccc;width:100%;clear:both;}
th,td {border-bottom:1px solid #ccc;padding:6px 10px 6px 5px;text-align:left; white-space:nowrap;color:#666;}
th {width:100px; white-space:nowrap;}
tr:hover { background:#f5f5f5;}
tr:hover a,tr:hover td,tr:hover th {color:#000;}
tr.testing {background:#ddd;}
thead td { background:#f5f5f5; font-weight:700;}
a:hover { text-decoration:underline;color:#0F0}
em {color:#cd0000;}
h1 { font-size:14px; line-height:30px; padding-bottom:10px;float:left;}
.note ol,.close {display:none;}
.note h2 {float:right;}
.note_hover {position:relative;}
.note_hover ol {display:block;position:absolute;right:0;top:18px;border:1px solid #ccc;padding:10px;background:#f5f5f5;width:300px;}
.note_hover .close {font-family:verdana;font-size:12px;display:block;position:absolute;right:8px;top:25px;z-index:7;}
.proxy {float:right;text-align:right;padding:0 10px 10px 0;}
.content{width:960px;color:black;}
.content .rows div{float:left;}
.title {width:960px;font-size:18px;line-height:28px;text-align:center;}
.condition{width:960px;}
</style>

</head>
<body>
<div class="wrap">
	<div  class="head">
		<div class="head_inner">
			<div class="logo"><a href="#"><img src="../../images/logo.jpg" alt="logo"/></a></div>
			<div class="nav" id="tab_nav">
				<a href="/tv_disp/freechart/index.html">首页</a>
				<a  target="_blank" href="http://developers.happyelements.com/docs">文档库</a>
				<a href="/portal" target="_blank">GIP问答</a>
			</div>
		</div>
	</div>
	
	<div  class="content" id="content">
		<div class="title">北向接口调用情况统计</div>
		<div class="condition">
			增加某日调用情况信息到下表.请选择日期<input type="text" id="dateChoice" />&nbsp;&nbsp;<input type="button" value="确定" id="addInfo"/>
		</div>
		
	</div>
	<div  class="foot">Copyright (c)  2012 Happyelements</div>
	</div>
</body>
<script type="text/javascript" src="../js/FusionCharts.js" ></script>
<script type="text/javascript" src="../js/calender.js"></script>
<script type="text/javascript" src="../../js/lib_0_2.js"></script>
<script type="text/javascript">
var trace=HE.trace;
var canl=HE.$('#dateChoice');
canl.onclick=function(){
	MyCalendar.SetDate(this);
};
var btn=HE.$('#addInfo');
var content=HE.$('#content');
HE.addEvent(btn,'click',function(){
	if(canl.value==""){
		alert('请选择日期');
		return;
	}
	var date=canl.value.replace(/\-/g,"");
	HE.ajax({
		url:"/tv_disp/freechart/api/gSummaryWebStatus.php",
		data:{
			"period":"minutely",
			"date":date
		}
	},function(d){
		//return;
		ToRenderChart(d,date);
	});
});

//load default data
HE.ajax({
	url:"/tv_disp/freechart/api/gSummaryWebStatus.php",
	data:{
		"period":"minutely"
	}
},function(d){
	ToRenderChart(d)
});

//生成该页面的图形的整体代码块
function ToRenderChart(d,date){
	date=date||(new Date().getFullYear()+''+((new Date().getMonth()+1)>10?(new Date().getMonth()+1):'0'+(new Date().getMonth()+1))+''+new Date().getDate());
	if(d.ret=='success'){
		var sum=d.data.wsCount;
		var sumCount = d.data.sumCount;
		var obj={};
		var s=new Array();
		var series={};
		var keys=new Array();
		var len=d.data.rows.length;
		for(var k in sum){
			var ratio=Math.round(sum[k]*1000/sumCount)/10;
			s.push({"status":k,"ratio":ratio,"count":sum[k]});
			series[''+k]=new Array();
			keys[keys.length]=k;
			for(var i=0;i<len;i++)series[''+k][i]=0;
		}
		series['id']=new Array();
		for(var i=0;i<len;i++){
			var o=d.data.rows[i];
			series['id'][i]=o.id;
			for(var j=0;j<keys.length;j++){
				var tmp=HE.getPara(o.s,keys[j]);
				if(keys[j]=="302"){trace(tmp)}
				if(tmp!='') series[keys[j]+''][i]=tmp;
			}
		}
		
		trace(series);
		obj.data=s;
		obj.id=d.data.date;
		
		var div=document.createElement('div');
		div.className="rows";
		var id=new Date().getTime();
		div.innerHTML='<div id="mp_'+id+'">FusionCharts will load here</div><div id="mc_'+id+'">Columns will load here</div><div id="mzl_'+id+'">ZoomLine will load here</div>';
		content.appendChild(div);
		renderPie(obj,"mp_"+id);
		//renderPie(sum,"myChart2");
		renderColumn(obj,"mc_"+id);
		renderZoomLine(series,"mzl_"+id);
		//renderColumn(sum,"myChartCol2");
	}else{
		alert("error,reason:"+d.data);
	}
}
/**
 * 生成饼状图形
 */
function renderPie(data,container){
	var myChart=new FusionCharts("../swf/Pie3D.swf",'f'+new Date().getTime(),"420","300","0","1");
	var str='<chart caption="北向接口调用比例'+data.id+'" showLegend="1" legendPosition="RIGHT" showLabels="0"  numberPrefix="%">';
	var len=data.data.length;
	for(var i=0;i<len;i++){
		var d=data.data[i];
		//if(d.ratio>0){
			str+='<set label="'+d["status"]+'" value="'+d["ratio"]+'" />';
		//}
	}
	str+='</chart>';
	myChart.setXMLData(str);
	myChart.render(container);
}
/**
 * 生成柱状图
 */
function renderColumn(data,container){
	var d=new Array();
	var strXML;
	strXML = "<chart caption='"+data.id+"' formatNumberScale='0' numberPrefix='' animation='1' showValues='1' rotateValues='1' placeValuesInside='1'>";
	strXML = strXML + "<categories><category name='"+'北向接口调用次数'+"' /></categories>";
	var len=data.data.length;
	for(var i=0;i<len;i++){
		var d=data.data[i];
		//if(d.ratio>0){
			strXML+="<dataset seriesName='"+d['status']+"' ><set value='"+d['count']+"' /></dataset>";
		//}
	}
	strXML = strXML + "</chart>";
	var chart = new FusionCharts("../swf/MSColumn3D.swf", 'f'+new Date().getTime(), "500", "330", "0", "1");
	chart.setXMLData(strXML);
	chart.render(container);
}

/**
 * 生成折线图
 */
function renderZoomLine(data,container){
	var chart = new FusionCharts("../swf/ZoomLine.swf", 'f'+new Date().getTime(), "960", "400", "0", "1");
	var strXML;
    //Add root elements
    strXML = "<chart caption='北向接口调用次数' compactDataMode='1' dataSeparator='|' divLineAlpha='40' vDivLineAlpha='40' allowPinMode='1'";
    //Add categories starting tag
    strXML += ">\n<categories>"
    //Build the categories first
    var len=data.id.length;
    for (var i=0; i<len; i++) {
        strXML += data['id'][i]+((i<(len-1)) ? "|" : "");
    }
    strXML += "</categories>\n";
    //Add the dataset and data items
    for (var k in data) {
        if(k=='id')continue;
        strXML += "<dataset seriesName='status "+k+"' >\n";
        for (var j=0; j<len; j++) {
            //Add the <set> items
            strXML += data[k][j]+((j<(len-1)) ? "|" : "");
        }
        strXML += "</dataset>";
    }
    strXML += "</chart>";
    chart.setXMLData(strXML);
    chart.render(container);
}

</script>
</html>